<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tencent 腾讯</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/cartoon.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
    <link rel="shortcut icon" href="./fonts/bitbug_favicon.ico" />
    <style>

    </style>
</head>

<body>
    <!-- 首页制作开始 -->
    <div class="box">
        <!-- 公共样式----头部导航栏制作开始 -->
        <div class="common-first">
            <div class="w common-nav">
                <!-- 头部logo制作 -->
                <div class="common-nav-logo">
                    <a href="#" class="common-logo">
                        <h1>Tencent腾讯</h1>
                    </a>
                </div>
                <!-- 头部中间导航栏制作 -->
                <ul class="common-menu">
                    <li class="menu-items">
                        <a href="others/abstract.html" class="text">简介</a>
                        <ul class="menu-list">
                            <li><a href="./others/abstract.html#one">公司简介</a></li>
                            <li><a href="./others/abstract.html#seven">愿景及使命</a></li>
                            <li><a href="./others/abstract.html#two">发展历程</a></li>
                            <li><a href="./others/abstract.html#three">业务架构</a></li>
                            <li><a href="./others/abstract.html#four">管理团队</a></li>
                            <li><a href="./others/abstract.html#five">企业文化</a></li>
                            <li><a href="./others/abstract.html#six">办公地点</a></li>
                        </ul>
                    </li>
                    <li class="menu-items">
                        <a href="./others/business.html" class="text">业务</a>
                        <ul class="menu-list">
                            <li><a href="./others/business.html#eight">面向用户</a></li>
                            <li><a href="./others/business.html#eight">面向企业</a></li>
                            <li><a href="./others/business.html#eight">创新科技</a></li>
                        </ul>
                    </li>
                    <li class="menu-items">
                        <a href="./others/staff.html" class="text">员工</a>
                        <ul class="menu-list">
                            <li><a href="./others/staff.html#nine">人才发展</a></li>
                            <li><a href="./others/staff.html#show_pic2">腾讯学院</a></li>
                            <li><a href="./others/staff.html#staff_work_environment">工作环境</a></li>
                            <li><a href="./others/staff.html#staff-con-4">员工活动</a></li>
                        </ul>
                    </li>
                    <li class="menu-items">
                        <a href="./others/duty.html" class="text">企业责任</a>
                        <ul class="menu-list">
                            <li><a href="./others/duty.html#ten">全球战疫</a></li>
                            <li><a href="./others/duty.html#eleven">践行承诺</a></li>
                            <li><a href="./others/duty.html#tweleve">支持善举</a></li>
                            <li><a href="./others/duty.html#lyh">鼓励创新</a></li>
                            <li><a href="./others/duty.html#lyh1">企业社会责任报告</a></li>
                        </ul>
                    </li>
                    <li class="menu-items">
                        <a href="./others/index-investor.html" class="text">投资者</a>
                        <ul class="menu-list">
                            <li><a href="./others/index-investor.html#lyh10">财务新闻</a></li>
                            <li><a href="./others/index-investor.html#lyh11">公告及财务报告</a></li>
                            <li><a href="./others/index-investor.html#lyh12">业绩电话会及路演</a></li>
                            <li><a href="./others/index-investor.html#lyh13">投资者工具包</a></li>
                            <li><a href="./others/index-investor.html#lyh14">证券及债券信息</a></li>
                            <li><a href="./others/index-investor.html#lyh15">企业管治</a></li>
                        </ul>
                    </li>
                    <li class="menu-items">
                        <a href="./others/index-media.htm" class="text">媒体</a>
                        <ul class="menu-list">
                            <li><a href="./others/index-media.htm#lyh20">企业动态</a></li>
                            <li><a href="./others/index-media.htm#lyh21">财务新闻</a></li>
                            <li><a href="./others/index-media.htm#lyh22">腾讯视角</a></li>
                            <li><a href="./others/index-media.htm#lyh23">媒体资料库</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 头部右边字体栏目制作 -->
                <div class="common-chosefont">
                    <a class="lang_ch current" lang="zh-cn">简</a>
                    <i class="s_line">|</i>
                    <a class="lang_hk" lang="zh-hk">繁</a>
                    <i class="s_line">|</i>
                    <a class="lang_en" lang="en-us">EN</a>
                </div>
            </div>
        </div>
        <!-- 公共样式----头部导航栏制作结束 -->


        <!-- 首页----内容栏目之头部视频制作开始 -->
        <div class="index-content-video">
            <video src="video/index-video.mp4" muted loop class="index-video"></video>
            <div class="w video-text">
                <div class="video-text-move">
                    <div class="move-stop">
                        <p class="lstop">连接</p>
                        <p class="rstop">共生未来</p>
                    </div>
                    <div class="move">
                        <div class="move-ul">
                            <i class="word word_1">你我</i>
                            <i class="word word_2">企业</i>
                            <i class="word word_3">科技</i>
                            <i class="word word_4">公益</i>
                            <!-- <i class="word word_1">你我</i> -->
                        </div>
                    </div>
                </div>
                <div class="video-slider">
                    <b class="slider"></b>
                    <span class="slider-text">滑动</span>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
        <script>
            var video = document.querySelector('.index-video');
            video.play();
        </script>
        <!-- 首页----内容栏目之头部视频制作结束 -->

        <!-- 首页----企业描述部分制作开始 -->
        <div class="index-describe">
            <p class="describe-text">
                腾讯是一家互联网公司，
                <span class="pc"></span> 通过技术丰富互联网用户的生活，
                <span class="m"></span> 助力企业数字化升级。
                <span class="pc"></span> 我们的使命是“用户为本 科技向善”。
            </p>
        </div>
        <!-- 首页----企业描述部分制作结束 -->

        <!-- 首页----企业详情介绍开始 -->
        <div class="index-details">
            <div class="details-img">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img src="images/index_detail_1.jpg" alt="">
                            <p>公司简介</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/index_detail_2.jpg" alt="">
                            <p>企业文化</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/index_detail_3.jpg" alt="">
                            <p>办公地点</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 首页----企业详情介绍结束 -->

        <!-- 首页----分享制作开始 -->
        <div class="index-links">
            <div class="index-link">
                <!-- 左边导航栏 -->
                <div class="link-tab">
                    <ul class="tab-list">
                        <li>
                            <a href="javascript:;" class="first">
                                <h3>连接用户与生活</h3>
                                <p>让生活更便捷更多彩</p>
                                <b class="icon_arrow_r"></b>
                                <i></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <h3>连接企业与科技</h3>
                                <p>数字化助手,助力产业升级</p>
                                <b class="icon_arrow_r"></b>
                                <i></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <h3>连接现在与未来</h3>
                                <p>探索面向未来的创新科技</p>
                                <b class="icon_arrow_r"></b>
                                <i></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 右边目录制作 -->
                <div class="link-content">
                    <!-- 第一个目录 -->
                    <div class="link-content-1 kejian">
                        <ul class="link-content-items">
                            <li class="items-1">
                                <div class="slideup">
                                    <h3 class="title">社交与通信</h3>
                                    <p>连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-2">
                                <div class="slideup">
                                    <h3 class="title">数字内容</h3>
                                    <p>基于优质内容，以技术为驱动引擎，探索社交和内容融合的下一代形态。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-3">
                                <div class="slideup">
                                    <h3 class="title">金融科技服务</h3>
                                    <p>连接用户、商户和金融机构，提供安全、专业、便捷的金融产品与服务。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-4">
                                <div class="slideup">
                                    <h3 class="title">工具</h3>
                                    <p>提供多种工具性软件，帮助用户快速直接解决各项具体需求。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 第二个目录 -->
                    <div class="link-content-2">
                        <ul class="link-content-items">
                            <li class="items-1">
                                <div class="slideup">
                                    <h3 class="title">腾讯广告营销</h3>
                                    <p>大数据营销平台，汇聚腾讯全量应用场景，提供一体化数字化营销方案。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-2">
                                <div class="slideup">
                                    <h3 class="title">腾讯云</h3>
                                    <p>提供领先的云产品与云服务，辅助企业走向数字化和全球化。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-3">
                                <div class="slideup">
                                    <h3 class="title">智慧产业</h3>
                                    <p>通过云、AI、大数据分析、安全、支付、小程序、LBS等互联网前沿技术和产品，<br>打造智慧产业方案，助力产业数字化升级。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 第三个目录 -->
                    <div class="link-content-3">
                        <ul class="link-content-items">
                            <li class="items-1">
                                <div class="slideup">
                                    <h3 class="title">人工智能</h3>
                                    <p>运用多种技术资产，提升人工智能实力，惠及人类和世界。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-2">
                                <div class="slideup">
                                    <h3 class="title">物联网</h3>
                                    <p>通过腾讯云物联网，致力提供IoT全栈产品和解决方案。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-3">
                                <div class="slideup">
                                    <h3 class="title">多媒体</h3>
                                    <p>腾讯多媒体实验室专注音视频通信技术的前瞻性研究。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                            <li class="items-4">
                                <div class="slideup">
                                    <h3 class="title">腾讯探索</h3>
                                    <p>携手合作伙伴探索未来和相关技术，帮助解决全球在食物、能源和水源方面的挑战。</p>
                                    <b class="icon_arrow_r"></b>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <!-- 首页----分享制作结束 -->

        <!-- 企业项目成就栏目介绍开始制作 -->
        <div class="index-achiev">
            <div class="achiev-show">
                <div class="achiev-img">
                    <ul>
                        <li class="open">
                            <a href="javascript:;">
                                <h4 class="tit">全球战疫 一起行动</h4>
                                <p class="txt">在新冠肺炎疫情之战中，腾讯秉持科技向善，以互联网科技的力量，通过我们的技术和产品为全球战疫提供支持。</p>
                                <div class="img img0"></div>
                            </a>
                        </li>
                        <li class="meil">
                            <a href="javascript:;">
                                <h4 class="tit">99 公益日</h4>
                                <p class="txt">每年一度于9月举行的全民公益活动，透过网上平台将大众在活动期间网上作出的捐款进行匹配。</p>
                                <div class="img img1"></div>
                            </a>
                        </li>
                        <li class="meil">
                            <a href="javascript:;">
                                <h4 class="tit">腾讯长城保护项目</h4>
                                <pclass="txt">腾讯公益慈善基金会与中国文物保护基金会共同合作，吸引公众关注和参与长城保护的文化遗产类公益项目。</p>
                                    <div class="img img2"></div>
                            </a>
                        </li>
                        <li class="meil">
                            <a href="javascript:;">
                                <h4 class="tit">腾讯为村</h4>
                                <p class="txt">根据乡村使用场景定制微信公众号，形成由村、乡镇、区县、州市组成的公众号集群服务村民，打造手机上的“为村服务中心”。</p>
                                <div class="img img3"></div>
                            </a>
                        </li>
                    </ul>
                </div>
                <b class="mask"></b>
            </div>
            <div class="achiev-details">
                <h3>
                    连接
                    <br> 责任与信任
                </h3>
                <p>聚合微小善行，以科技让世界更美好</p>
                <div class="achiev-icon">
                    <i class="icon-black"></i>
                </div>
            </div>
        </div>
        <!-- 企业项目栏目介绍开始结束 -->
        <!-- 企业发展介绍开始 -->
        <div class="index-develop">
            <div class="develop-text">
                <h3>
                    连接
                    <br> 人才与发展
                </h3>
                <p>激发活力, 助力成长</p>
                <b class="develop-icon"></b>
            </div>
            <div class="develop-img">
                <ul class="opacity-list">
                    <li class="items1"></li>
                    <li class="items2"></li>
                    <li class="items3"></li>
                </ul>
                <div class="develop-icon" style="display: none;"></div>
            </div>
            <div class="develop-btn">
                <ul class="change-blue">
                    <li class="items"></li>
                    <li class="items"></li>
                    <li class="items"></li>
                </ul>
            </div>
        </div>
        <!-- 企业发展介绍结束 -->

        <!-- 公共样式----尾部信息栏制作开始 -->
        <div class="common-foot">
            <div class="w common-text">
                <!-- 关注我们栏目制作 -->
                <div class="focus-us">
                    <h1>关注我们</h1>
                    <ul>
                        <li>
                            <a href="javascript:;" class="wechat-code-btn">
                                <b class="icon wechat"></b>
                                <img class="wechat-code" src="images/wechat-code.jpg" alt="">
                            </a>
                        </li>
                        <li><a href="javascript:;"><b class="icon weibo"></b></a></li>
                        <li><a href="javascript:;"><b class="icon twitter"></b></a></li>
                        <li><a href="javascript:;"><b class="icon mi"></b></a></li>
                    </ul>
                </div>
                <!-- 加入我们制作 -->
                <div class="footer-center join-us">
                    <div class="title">
                        <h3>加入我们</h3>
                    </div>
                    <ul>
                        <li><a href="javascript:;">社会招聘</a></li>
                        <li><a href="javascript:;">校园招聘</a></li>
                        <li><a href="javascript:;">国际招聘</a></li>
                    </ul>
                </div>
                <!-- 联系我们制作 -->
                <div class="footer-center contact-us">
                    <div class="title">
                        <h3>联系我们</h3>
                    </div>
                    <ul>
                        <li><a href="javascript:;">客户服务</a></li>
                        <li><a href="javascript:;">合作洽谈</a></li>
                        <li><a href="javascript:;">腾讯采购</a></li>
                        <li><a href="javascript:;">媒体及投资者</a></li>
                    </ul>
                </div>
                <!-- 法律信息制作 -->
                <div class="footer-center law-meaasge">
                    <div class="title">
                        <h3>法律信息</h3>
                    </div>
                    <ul>
                        <li><a href="javascript:;">服务协议</a></li>
                        <li><a href="javascript:;">隐私政策</a></li>
                        <li><a href="javascript:;">知识产权</a></li>
                    </ul>
                </div>
                <!-- 尾部logo制作 -->
                <div class="footer-logo">
                    <img src="images/tencent_logo.png" alt="Tencent腾讯">
                </div>
                <!-- 尾部企业信息制作 -->
                <div class="footer-company">
                    <ul class="links">
                        <li>
                            <a href="javascript:;">法律声明</a>
                        </li>
                        <li>
                            <a href="javascript:;">阳光准则</a>
                        </li>
                        <li>
                            <a href="javascript:;">网站地图</a>
                        </li>
                        <li class="num">
                            <a href="javascript:;">粤网文【2017】6138-1456号</a>
                        </li>
                        <li class="num">
                            <a href="javascript:;">粤B2-20090059-1</a>
                        </li>

                    </ul>
                    <p class="copyright">Copyright © 1998 - 2021 Tencent. All Rights Reserved. 腾讯公司 版权所有</p>

                </div>
            </div>
        </div>
        <!-- 公共样式----尾部信息栏制作结束 -->
        <!-- 判断页面是否为上下滚动 -->
        <!-- 需求一: 当页面滚动在72到100之间的时候, common-first里面样式发生改变-->
        <!-- 需求: 当页面滚动>72且往下滚动的时候,common-first往上移动72px-->
        <!-- 需求: 当页面滚动>72且往上滚动的时候,common-first在往下移动72px,并修改样式-->
        <script>
            $(function() {
                function a() {
                    $(".common-first").css("backgroundColor", "white");
                    $(".common-menu").find("a").css("color", "black");
                    $(".common-chosefont").find("a,i").css("color", "black");
                    $(".common-nav-logo").find("h1").addClass("h1hover");
                }

                function moveWind() {
                    var startScrollTop = document.body.scrollTop;
                    window.addEventListener('scroll', function() {
                        var moveScrollTop = window.pageYOffset;
                        var moveLength = moveScrollTop - startScrollTop;
                        console.log(moveLength);
                        startScrollTop = moveScrollTop;
                        if (window.pageYOffset > 72) {
                            a();
                            console.log(12);
                            if (window.pageYOffset > 100) {
                                $(".common-first").css("marginTop", -72)
                                console.log(111);
                            }
                        }
                        if (moveLength === 0) {
                            console.log(false);
                        } else if (moveLength > 0) {
                            $(".common-first").css("marginTop", -72)
                        } else if (moveLength < 0) {
                            // console.log("up");
                            $(".common-first").css("marginTop", 0)
                            a();
                        };
                    });
                }
                moveWind();
                /* if(window.pageYOffset === 0){
                            $(".common-first").css("backgroundColor","");
                            $(".common-menu").find("a").css("color","white");
                            $(".common-chosefont").find("a,i").css("color","white");
                            $(".common-nav-logo").find("h1").removeClass("h1hover");
                }; */
            })
        </script>
    </div>
</body>

</html>